<template>
	<view class="box">

		<view class="qiye">

			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="qiye-title">
					<text>重置密码</text>
				</view>
				<uni-forms-item labelWidth="90px" name="username" label="用户名" labelAlign="right" required>
					<uni-easyinput v-model="valiFormData.username" placeholder="用户名" />
				</uni-forms-item>
				<view>
					<uni-forms-item labelWidth="90px" required name="password" label="新密码" labelAlign="right">
						<uni-easyinput v-model="valiFormData.password" placeholder="新密码" />
					</uni-forms-item>
				</view>
				<view>
					<uni-forms-item labelWidth="90px" required name="againpassword" label="确认密码" labelAlign="right">
						<uni-easyinput v-model="valiFormData.againpassword" placeholder="确认密码" />
					</uni-forms-item>
				</view>
				<view>
					<uni-forms-item labelWidth="90px" required name="securitycode" label="安全码" labelAlign="right">
						<uni-easyinput v-model="valiFormData.securitycode" placeholder="安全码" />
					</uni-forms-item>
				</view>
			</uni-forms>

			<button type="primary" @click="submit('valiForm')">提交</button>

		</view>
	</view>
</template>

<script>
	import axios from "axios"
	import Cookies from "js-cookie"
	export default {
		data() {
			return {
				pwdcode: '111111',
				// 校验表单数据
				valiFormData: {
					username: '',
					password: '',
					againpassword: '',
					securitycode: ''

				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					againpassword: {
						rules: [{
							required: true,
							errorMessage: '密码不一致',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value != data.password) {
									callback('密码不一致')
								}
								return true
							}
						}],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入6-12位密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let pwd = /^[A-Za-z0-9]{6,12}$/
								if (!pwd.test(value)) {
									callback('请输入6-12位密码，请重新填写')
								}
								return true
							}
						}]
					},
					securitycode: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^[A-Za-z0-9]{6,12}$/
								if (!iphoneReg.test(value)) {
									callback('格式不正确，请重新填写')
								}
								return true
							}
						}]
					},

				},

			}
		},
		methods: {

			submit(ref) {
				const code = this.valiFormData.securitycode
				const username = this.valiFormData.username
				const password = this.valiFormData.password
				this.$refs[ref].validate().then(res => {
						uni.showLoading({
							title: '正在提交...',
							mask: true
						})
					})
					.then(res => {
						axios.post('/api/changepwd?username=' + username +
								'&password=' + password +
								'&securitycode=' + code)
							.then(res => {
								if (res.data == 200) {
									// console.log(res.data);
									this.valiFormData.securitycode = ''
									this.valiFormData.username = ''
									this.valiFormData.password = ''
									this.valiFormData.againpassword = ''
									uni.showToast({
										title: '重置成功',
										mask: true,
									})

								}
							}).then(res => {
								axios.get('/api/logout').then(res =>{
									Cookies.remove('username')
									uni.removeStorageSync('userlist')
								}).then(res =>{
									uni.switchTab({
										url:'/pages/my/my'
									})
									setTimeout(res=>{
										this.$router.go(0)
									},500)
								})
							})
							.catch(res => {
								uni.showToast({
									title: '用户名或安全码错误..',
									mask: true,
									icon: "error"
								})
							})
					})
					.catch(err => {
						uni.showToast({
							title: '输入格式不正确',
							icon: "error"
						})
					});

			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			back2() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100%;
		height: 100%;
	}

	.qiye {
		width: 100%;
		height: 100%;
		padding: 5% 5% 100rpx 5%;
	}

	.qiye-title {

		padding: 5px 2%;
		background-color: #CCCCCC;
		color: #666666;
	}

	.content {
		display: flex;
		align-items: flex-end;
		padding: 10rpx;
	}

	.img {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		display: flex;
		flex-direction: column;

		.img_img {
			width: 100%;
			height: 100%;
		}
	}

	.button {
		width: 300rpx;
		height: 100rpx;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	uni-button {
		margin-top: 50px;
		width: 400rpx;
	}
</style>
